<!DOCTYPE html>
<html>
<head lang="zh">
    <meta charset="UTF-8">
    <title>课程实例</title>
    <meta content="课程教学实例" name="Description">
    <meta content="bootstrap 前端学习 css" name="Keywords">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--坑爹的IE兼容-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--将360默认为极速模式打开 -->
    <meta name="renderer" content="webkit">
    <!-- Bootstrap -->
    <link href="//cdn.bootcss.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!--导航-->
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
          <ul class="nav">
              <li class="active">
                  <a href="#">首页</a>
              </li>
              <li><a href="#">起步</a></li>
              <li><a href="#">脚手架</a></li>
              <li><a href="#">基本CSS样式</a></li>
              <li><a href="#">组件</a></li>
              <li><a href="#">JavaScript插件</a></li>
              <li><a href="#">定制</a></li>
              <li><a href="#">网站实例</a></li>
          </ul>
      </div>
    </div>
</nav>

<!--页头-->
<header>
    <div class="container" style="text-align: center">
        <h1 style="margin-top:137px;">BootStrap</h1>
        <h2>简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。</h2>
        <div class="btn-gronp">
            <button class="btn btn-primary btn-large">下载Bootstrap</button>
        </div>
        <div style="margin-top:40px;">
        <a href="#" style="margin-right:20px;color:#dddddd">GitHub project</a>
        <a href="#" style="margin-right:20px;color:#dddddd">案例</a>
        <a href="#" style="margin-right:20px;color:#dddddd">扩展</a>
        <span style="color:#dddddd">Version 2.3.2</span>
        </div>
    </div>
</header>

<!--正文-->
<article>
    <div class="container" >
       <div class="row">
           <div class="span12" style="text-align: center;color: blue;margin-top: 98px;">
               Bootstrap v3 中文文档
           </div>
       </div>
       <div class="row">
           <div class="span12" style="margin-top: 85px;text-align: center">
               <h2>Bootstrap介绍</h2>
               <h5 style="color: darkgray;">需要为爱上Bootstrap找N多理由吗？就在眼前。</h5>
           </div>
           <div class="span4">
               <img src="1.png" style="width: 300px;height: auto;"/>
               <h3 style="color: darkgrey;margin-top: 40px;" class="text-center">人人为我，我为人人。</h3>
               <p>由<a href="#" style="color: cornflowerblue;" >@mdo</a> 和<a href="#" style="color: cornflowerblue;" > @fat</a>
                   在Twitter工作时创建，Bootstrap使用
                   <a href="#" style="color: cornflowerblue;" >LESS CSS</a> 并用<a href="#" style="color: cornflowerblue;" > Node</a> 编译，
                   托管在 <a href="#" style="color: cornflowerblue;" >GitHub</a>上，方便大家使用这一框架构建更好的web应用。</p>
           </div>
           <div class="span4">
               <img src="2.png" style="width: 300px;height: auto;"/>
               <h3 style="color: darkgrey;margin-top: 32px;" class="text-center">任何人都可以使用。</h3>
               <p>Bootstrap不光为了看起来好看，而且在现代的桌面浏览器上有极佳的表现(包括IE7！)。
                   在平板电脑和智能手机上面还有<a href="#" style="color: cornflowerblue;" > 响应式CSS</a> 可以使用。</p>
           </div>
           <div class="span4">
               <img src="3.png" style="width: 300px;height: auto;"/>
               <h3 style="color: darkgrey;margin-top: 40px;" class="text-center">丰富的特色。</h3>
               <p>12列的响应式<a href="#" style="color: cornflowerblue;" >栅格结构</a>、丰富的组件、
                   <a href="#" style="color: cornflowerblue;" >JavaScript</a>插件、排版、表单控件，
                   还有<a href="#" style="color: cornflowerblue;" > 基于web的定制工具</a>。</p>
           </div>
       </div>
       <div class="row">
           <div class="span12" style="margin-top: 155px;text-align: center">
               <h1>基于Bootstrap构建的网站。</h1>
               <h4>更多基于Bootstrap构建的网站列表，请访问<a href="#" style="color: cornflowerblue;" > 优站精选</a>
                   或者 <a href="#" style="color: cornflowerblue;" >看看下面的几个案例</a>。</h4>
           </div>
           <div class="span3" style="margin-top: 44px">
               <a href="#"> <img src="5.jpg" style="width: 200px;height: auto;"/></a>
           </div>
           <div class="span3" style="margin-top: 44px">
               <a href="#"><img src="4.jpg" style="width: 200px;height: auto;"/></a>
           </div>
           <div class="span3" style="margin-top: 44px">
               <a href="#"><img src="6.jpg" style="width: 200px;height: auto;"/></a>
           </div>
           <div class="span3" style="margin-top: 44px">
               <a href="#"><img src="7.jpg" style="width: 200px;height: auto;"/></a>
           </div>
       </div>
    </div>
</article>

<!--页脚-->
<footer>
    <div class="container" style="text-align: center; margin-top: 132px; width:493px; height: auto;">
        <p>Designed and built with all the love in the world by<a href="#" style="color: cornflowerblue"> @mdo</a> and
            <a href="#" style="color: cornflowerblue"> @fat</a>.Code licensed under
            <a href="#" style="color: cornflowerblue">Apache License v2.0</a>,documentation under
            <a href="#" style="color: cornflowerblue">CC BY 3.0</a>.
            <a href="#" style="color: cornflowerblue">Glyphicons Free</a> licensed under
            <a href="#" style="color: cornflowerblue">CC BY 3.0</a>.</p>
        <a href="#" style="margin-right:16px; color: cornflowerblue">Blog</a>
        <a href="#" style="margin-right:16px; color: cornflowerblue">Issues</a>
        <a href="#" style="color: cornflowerblue">Changelog</a>
    </div>
</footer>

  <script src="http://code.jquery.com/jquery.js"></script>

<script src="//cdn.bootcss.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>



</body>
</html>